import React, { useEffect, useState, useRef } from 'react'
import { Steps, Form, Input, Select, Button, message, notification } from 'antd';
import NewsEditor from "../../../components/NewsEdit/NewsEdit"
import style from "./NewsUpdate.module.scss"
import http from "../../../util/http"
import { BulbFilled } from '@ant-design/icons';
const { Step } = Steps;
const { Option } = Select;
export default function NewsAdd(props) {
  const [newsMenu, setNewsMenu] = useState([])
  const [current, setCurrent] = useState(0)
  const [formInfo, setformInfo] = useState({})
  const [content, setContent] = useState("")
  const NewsFrom = useRef();
  useEffect(() => {
    http.get("/categories").then(res => {
      setNewsMenu(res.data)
    })
  }, [])
  useEffect(() => {
    const id = props.match.params.id;
    http.get(`/news/${id}?_expand=category&_expand=role`).then(res => {
      console.log(res.data);
      const { title, categoryId, content } = res.data;
      NewsFrom.current.setFieldsValue({
        title,
        categoryId
      })
      setContent(content)
      console.log(content);
    })
  }, [props.match.params.id])
  // const changeItem = (item) => {
  //     return
  // }
  // const onFinish = (value) => {
  //     console.log(value);
  // }
  const nextPage = () => {
    if (current === 0) {
      console.log(NewsFrom.current)
      // ref.current
      NewsFrom.current.validateFields().then(res => {
        // console.log(res);
        setformInfo(res)
        return setCurrent(current + 1)
      }).catch(err => {
        console.log(err)
      })
    } else {
      if (content === "" || content.trim() === "<p></p>") {
        message.error("新闻内容不能为空")
      } else {
        setCurrent(current + 1)
      }
      console.log(formInfo, content)


    }
  }
  const prevPage = () => {
    return setCurrent(current - 1)
  }
  // const user = JSON.parse(localStorage.getItem('token'))
  // 保存草稿箱 提交审核
  const saveDrafts = (auditState) => {
    http.patch(`/news/${props.match.params.id}`, {
      ...formInfo,
      content: content,
      auditState: auditState,
      // publishTime: 1615778496314
    }).then(res => {
      props.history.push(auditState === 0 ? '/news-manage/draft' : '/audit-manage/list')
      notification.info({
        message: `通知`,
        description:
          `您可以到${auditState === 0 ? '草稿箱' : '审核列表中'}查看你的新闻`,
        placement: "topRight",
        style: {
          color: '#33ff00'
        },
        icon: <BulbFilled style={{ color: '#ffff33' }} />
      });
    })
  }
  // console.log(NewsFrom)
  return (
    <div className={style.mainContainer}>
      <h1 className={style.title}><span className={style.icon}
        onClick={() => {
          props.history.goBack()
        }}
      >←</span>更新新闻</h1>

      <Steps current={current}>
        <Step title="基本信息" description="新闻标题,新闻分类" />
        <Step title="新闻内容" description="新闻主体内容" />
        <Step title="新闻提交" description="保存草稿或者提交审核" />
      </Steps>
      <div style={{ marginTop: 60 }}>
        {
          current === 0 && <div className={current === 0 ? "" : style.active}>
            <Form
              name="basic"
              // initialValues={{ remember: true }}
              // onFinish={onFinish}
              // onFinishFailed={onFinishFailed}
              autoComplete="off"
              ref={NewsFrom}
            >
              <Form.Item style={{ marginBottom: 30 }}
                label="新闻标题"
                name="title"
                rules={[{ required: true, message: '请输入文章标题' }]}
              >
                <Input />
              </Form.Item>

              <Form.Item
                label="新闻分类"
                name="categoryId"
                style={{ marginBottom: 60 }}
                rules={[{ required: true, message: '这是必选项哦！' }]}
              >
                <Select>
                  {/* <Option value="lucy">lucy</Option> */}
                  {
                    newsMenu.map(item => {
                      return <Option value={item.id} key={item.id}>{item.title}</Option>
                    })
                  }
                </Select>
              </Form.Item>
            </Form>
          </div>
        }
        {
          current === 1 && <div className={current === 1 ? "" : style.active}>
            <NewsEditor getContent={(text) => {
              // console.log(text);
              setContent(text)
            }}
              content={content}
            ></NewsEditor>
          </div>
        }
        {
          current === 2 && <div className={current === 2 ? "" : style.active}></div>
        }
        {
          current > 0 && <Button style={{ width: 100 }}
            onClick={() => prevPage()}
          >
            上一步
          </Button>
        }
        {
          current === 2 && <span><Button type='primary' style={{ width: 100, marginLeft: 20 }}
            onClick={() => saveDrafts(0)}
          >保存草稿箱</Button>
            <Button danger style={{ width: 100, marginLeft: 20 }}
              onClick={() => saveDrafts(1)}
            >提交审核</Button></span >
        }
        {
          current < 2 && <Button type="primary" htmlType="submit" style={{ width: 100, marginLeft: 20 }}
            onClick={() => nextPage()}
          >
            下一步
          </Button>
        }
      </div>

    </div >
  )
}
